<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset="utf-8">
    <title>Vysor</title>
    <link href='font-awesome/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="loader.css" rel="stylesheet">
    <style>
      body {
/*        font-family: 'Roboto', sans-serif;*/
        background-color: #000;
        position: absolute;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
        overflow: hidden;
      }
      canvas {
        position: absolute;
        padding: 0;
        margin: 0;
      }
      .overlay {
        position: absolute;
        background-color: black;
        opacity: .75;
        display: none;
      }

      .overlay img {
        background-color: black;
        width: 100%;
        display: block;
        margin: auto;
        margin-top: 100px;
      }

      .head {
        -webkit-app-region: drag;
        color: white;
        background-color: #4696e5;
        position: absolute;
        top: 0;
        height: 36px;
        z-index: 99;
        width: 100%;
        display: table;
        table-layout: fixed;
      }

      .title {
        padding-left: 24px;
        display: table-cell;
        vertical-align: middle;
      }

      .topbuttonbar {
        width: 99%;
        display: table-cell;
        vertical-align: middle;
        padding-left: 24px;
        padding-right: 24px;
      }

      .topbuttonbar .btn-toolbar {
        float: right;
      }

      #settings {
        text-align: center;
      }

      .foot {
        display: table;
        background-color: #468fcc;
        position: absolute;
        bottom: 0;
        height: 48px;
        z-index: 99;
        width: 100%;
      }

      .foot span {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        color: white;
      }

      .foot-row {
        display: table-row;
      }

      .foot span:hover,
      .foot span:focus {
        background-color: #326793;
      }

      .foot span:active {
        background-color: #84A4BE;
      }

      #listener {
        position: absolute;
      }

      #drag {
        text-align: center;
      }

      #drag span {
        margin-top: 200px;
        color: green;
      }


      #reconnect {
        color: white;
        margin-top: 200px;
        text-align: center;
      }
    </style>
    <script src='common/jquery-2.1.1.min.js'></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <script src="vysor-defaults.js"></script>
    <script src='md5.js'></script>

    <script src="require.js" type="text/javascript"></script>
    <script src='util.js'></script>
    <script src='bytebuffer.js'></script>
    <script src='socket/socket.js'></script>
    <script src='socket/fetch.js'></script>
    <script src='socket/filesocket.js'></script>
    <script src='socket/gcmsocket.js'></script>
    <script src='socket/dummysocket.js'></script>

    <script src='adb/adb-client.js'></script>
    <script src='device-settings.js'></script>
    <script src='modal.js'></script>

    <script src='cast/protobuf.min.js'></script>
    <script src='cast/aes.js'></script>
    <script src='cast/rtp.js'></script>
    <script src='cast/cast_message.js'></script>
    <script src='cast/audio_queue.js'></script>
    <script src='cast/cast_server.js'></script>

    <script src='flash.js'></script>
    <script src='video_decode/common.js'></script>
    <script src='video_decode/pepper.js'></script>
    <script src='audio_playback/common.js'></script>
    <script src='audio_playback/pepper.js'></script>

    <script src='screen.js'></script>

    <!-- dirty hack -->
    <script src='uglify-screen.js'></script>
  </head>

  <body>
    <div class="modal fade"  id="settings-modal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title">Settings</h4>
          </div>
          <div class="modal-body">
            <form>
              <div class="input-group">
                <span class="input-group-addon" id="basic-addon1">Name</span>
                <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" id='new-display-name'>
              </div>
              <br/>

              <label>Window</label>
              <div class='well'>
                <div class="checkbox">
                  <label>
                    <input id='pin-title-check' type="checkbox" checked> Pin Title Bar
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input id='softkeys-check' type="checkbox" checked> Navigation Bar
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input id='fullscreen-check' type="checkbox"> Fullscreen Mode
                  </label>
                </div>
                <div class="checkbox">
                  <label>
                    <input id='always-on-top-check' type="checkbox"> Always On Top
                  </label>
                </div>
              </div>

              <div id='quality-container'>
                <label>Video Quality</label>
                <div class='well'>
                  <label>Bitrate</label>
                  <select id='bitrate' class="form-control">
                    <option>
                      500Kbps (fast, low quality)
                    </option>
                    <option>
                      750Kbps
                    </option>
                    <option>
                      1Mbit
                    </option>
                    <option>
                      1.5Mbit
                    </option>
                    <option>
                      2Mbit
                    </option>
                    <option>
                      3Mbit
                    </option>
                    <option>
                      4Mbit
                    </option>
                    <option>
                      6Mbit
                    </option>
                    <option>
                      8Mbit (slow, high quality)
                    </option>
                  </select>

                  <br/>
                  <label>Resolution</label>
                  <select id='resolution' class="form-control">
                    <option>Use Recommended Settings</option>
                    <option>25%</option>
                    <option>50%</option>
                    <option>75%</option>
                    <option>Original</option>
                  </select>

                  <br/>
                  <label>Decoder</label>
                  <select id='decoder' class="form-control">
                    <option>Software (Recommended)</option>
                    <option>Hardware</option>
                    <option>Hardware with fallback</option>
                  </select>

                  <br/>
                  <label>Defaults</label>
                  <div>
                    <button type="button" class="btn btn-default" id='low-quality-defaults'>Low</button>
                    <button type="button" class="btn btn-default" id='medium-quality-defaults'>Medium</button>
                    <button type="button" class="btn btn-default" id='high-quality-defaults'>High</button>
                  </div>
                </div>
              </div>


              <div id='display-settings-container'>
                <label>Display Settings</label>
                <div class='well'>
                  <label class='hidden'>Size and Density</label>
                  <select id='display-settings' class="form-control hidden">
                  </select>

                  <div class="checkbox">
                    <label>
                      <input id='dim-display' type="checkbox"> Dim Display while Connected
                    </label>
                  </div>
                </div>
              </div>

              <div>
                <label>Status</label>
                <div class='well'>
                  <label>Web Video Stream</label>
                  <p><a id='web-video-stream'></a></p>
                  <label>Web Audio Stream</label>
                  <p><a id='web-audio-stream'></a></p>
                </div>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id='settings-cancel'>Cancel</button>
            <button type="button" class="btn btn-default" id='settings-defaults'>Defaults</button>
            <button type="button" class="btn btn-primary" data-dismiss="modal" id='settings-ok'>Save</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class="modal fade"  id="notificationModal" tabindex="-1" role="dialog">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id='modal-title'>Modal</h4>
          </div>
          <div class="modal-body">
            <p id='modal-body'></p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" id='modal-cancel'></button>
            <button type="button" class="btn btn-primary" id='modal-ok'></button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    <div class='head'>
      <span class='title' style='white-space: nowrap;'>Vysor</span>
      <span class='topbuttonbar'>
        <span class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
        </span>
      </span>
    </div>

    <div id='listener'></div>
    <div id='listener2'></div>
    <div class='overlay' id='dead'>
      <img src='dead-mac.png' alt='dead'>
    </div>
    <div class='overlay' id='reconnect'>
      <div>
        <div><i class='fa fa-wifi fa-5x'></i></div>
        <div><a href="#" class="btn btn-success" id='reconnect-button'>Reconnect</a></div>
      </div>
    </div>
    <div class='overlay' id='drag'>
        <span class='fa fa-5x fa-upload'></span>
    </div>
    <div class='overlay' id='loading' style='display: block; width: 100%; height: 100%;'>
      <div id='loading-text' style='margin-top: 48px; color: #fff; text-align: center;'>Connecting...</div>
      <div class='loader'></div>
    </div>
    <div class='foot'>
      <div class='foot-row'>
      </div>
    </div>
  </body>
</html>
